// page1-登录板块点击切换
let tit = document.querySelectorAll("div.form-right-tit>div");
let sign = document.querySelectorAll(".sign");
for (let i = 0; i < tit.length; i++) {
	tit[i].onclick = function () {
		for (let j = 0; j < tit.length; j++) {
			tit[j].classList.remove("right-tit1");
		}
		this.classList.add("right-tit1");
		// console.log(i);
		if (i == 0) {
			sign[0].style.display = "block";
			sign[1].style.display = "none";
		} else {
			sign[1].style.display = "block";
			sign[0].style.display = "none";
		}
	};
}
// 封装post请求
/* let info1;
function getData(obj, url) {
	let xhr = new XMLHttpRequest();
	xhr.open(
		"POST",
		url
	);
	xhr.setRequestHeader("Content-Type", "application/json");
	xhr.send(JSON.stringify(obj));
	xhr.onreadystatechange = function () {
		if (xhr.readyState === 4) {
			if (xhr.status >= 200 && xhr.status < 300) {
				// console.log(xhr.status)
				info1 = JSON.parse(xhr.responseText);
				console.log(info1);
				// (JSON.parse(xhr.responseText));
			} else {
				info1 = "";
			}
			// console.log(dataa)
		}
	}

} */
// page1-页面切换
let page1 = document.querySelector(".page1-sign");
let page2 = document.querySelector(".page2-boss");
// page2-问题页面切换
let que1 = document.querySelectorAll(".question1");
let page3 = document.querySelector(".page3-boss");
for (let i = 0; i < que1.length; i++) {
	que1[i].onclick = function () {
		page2.style.display = "none";
		page3.style.display = "block";
	};
}
// 获取url中rest参数
function getQueryVariable(url, variable) {
	// let query = window.location.search.substring(1);
	let vars = query.split("&");
	for (var i = 0; i < vars.length; i++) {
		var pair = vars[i].split("=");
		if (pair[0] == variable) {
			return pair[1];
		}
	}
	return false;
}

// page2-推荐-文章页面切换 静态文章详情请求
let btn1P2 = document.querySelectorAll(".btn1P2");
// 由于有用静态页面做示例效果
let page4Part1 = document.querySelectorAll(".page4-1-boss");
page4Part1[0].style.display = "none";
// page4Part1[1].style.display = "block";
let comAll = document.querySelectorAll(".content4-box10");
comAll[0].style.display = "none";
for (let i = 1; i < comAll.length; i++) {
	comAll[i].style.display = "block";
}
for (let i = 0; i < btn1P2.length; i++) {
	btn1P2[i].onclick = function () {
		let urls = ["https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/articles/details/{id}",
			"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/comments/get/{articalId}"]
		for (let i = 0; i < urls.length; i++) {
			let xhr = new XMLHttpRequest();
			xhr.open(
				"GET",
				urls[i]
			);
			xhr.setRequestHeader("Content-Type", "application/json");
			xhr.setRequestHeader("token", sessionStorage.getItem('token'));
			xhr.send();
			xhr.onreadystatechange = function () {
				if (xhr.readyState === 4) {
					if (xhr.status >= 200 && xhr.status < 300) {
						if (i == 0) {
							page2.style.display = "none";
							page4Part1 = document.querySelectorAll(".page4-1-boss");
							for (let i = 1; i < 2; i++) {
								page4Part1[i].style.display = "block";
								page4Part1[i].setAttribute("code", xhr.response.code);
							}
						}
						if (i == 1) {
							// 接口没传数据 有的话就渲染到文章详情页中
						}
					}
				}
			};
		};
	}
}
// page2热搜-切换到文章页面 文章详情请求
let hot1P2 = document.querySelectorAll(".left2-1-box3-2 a");
let btn2P2 = document.querySelectorAll(".left2-1-box3-3>a");
let page4Part2 = document.querySelector(".page4-2-boss");
for (let i = 0; i < hot1P2.length; i++) {
	hot1P2[i].onclick = function () {
		let urls = ["https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/articles/details/{id}",
			"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/comments/get/{articalId}"]
		for (let i = 0; i < urls.length; i++) {
			let xhr = new XMLHttpRequest();
			xhr.open(
				"GET",
				urls[i]
			);
			xhr.setRequestHeader("Content-Type", "application/json");
			xhr.setRequestHeader("token", sessionStorage.getItem('token'));
			xhr.send();
			xhr.onreadystatechange = function () {
				if (xhr.readyState === 4) {
					if (xhr.status >= 200 && xhr.status < 300) {
						if (i == 0) {
							page2.style.display = "none";
							page4Part2.style.display = "block";
							page4Part2.setAttribute("code", xhr.response.code)
						}

						if (i == 1) {
							// 接口没传数据 有的话就渲染到文章详情页中
						}
					}
				}
			};
		};
	}
};

for (let i = 0; i < btn2P2.length; i++) {
	btn2P2[i].onclick = function () {
		let xhr = new XMLHttpRequest();
		xhr.open(
			"GET",
			"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/articles/details/{id}"
		);
		xhr.setRequestHeader("Content-Type", "application/json");
		xhr.setRequestHeader("token", sessionStorage.getItem('token'));
		xhr.send();
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4) {
				if (xhr.status >= 200 && xhr.status < 300) {
					page2.style.display = "none";
					page4Part2.style.display = "block";
					page4Part2.setAttribute("code", xhr.response.code)
				}
			}

		};
	};
}

// nav-my 点击显示
// let detail//发布文章的详情页
let navImg;
let navMy;
function navImgBtn() {
	navImg = document.querySelectorAll(".navImg");
	navMy = document.querySelector(".page2-nav-my");
	for (let i = 0; i < navImg.length; i++) {
		navImg[i].onclick = function () {
			navMy.style.display == "block"
				? (navMy.style.display = "none")
				: (navMy.style.display = "block");
		};
	}
}
navImgBtn();
//点击跳转到个人中心页
let n = 2;
let page5 = document.querySelector(".page5-boss");
let page6 = document.querySelector(".page6-boss");
let bodyAll = document.querySelector("body > *");
let body = document.querySelector("body");
let me;
function meBtn() {
	me = document.querySelectorAll(".page5-my");
	for (let i = 0; i < me.length; i++) {
		me[i].onclick = function () {
			// bodyAll.style.display = "none";
			page1.style.display = "none";
			page2.style.display = "none";
			page3.style.display = "none";
			page4Part1 = document.querySelectorAll(".page4-1-boss");
			for (let i = 0; i < page4Part1.length; i++) {
				page4Part1[i].style.display = "none";
			}
			page4Part2.style.display = "none";
			page5.style.display = "block";
			page6.style.display = "none";
			navMy.style.display = "none";
		};
	}
}
meBtn();
// 可点击用户头像进入用户主页
let myClickImg = document.querySelectorAll(".myClick");
function myClick() {
	for (let i = 0; i < myClickImg.length; i++) {
		myClickImg[i].style.cursor = "pointer";
		myClickImg[i].onclick = function () {
			page1.style.display = "none";
			page2.style.display = "none";
			page3.style.display = "none";
			page4Part1 = document.querySelectorAll(".page4-1-boss");
			for (let i = 0; i < page4Part1.length; i++) {
				page4Part1[i].style.display = "none";
			}
			page4Part2.style.display = "none";
			page5.style.display = "block";
			page6.style.display = "none";
			navMy.style.display = "none";
		}
	}
}
myClick();
//点击切换到文章发布区
let writing = document.querySelectorAll(".writing");
function writingClick() {
	writing = document.querySelectorAll(".writing");
	for (let i = 0; i < writing.length; i++) {
		writing[i].onclick = function () {
			bodyAll.style.display = "none";
			page1.style.display = "none";
			page2.style.display = "none";
			page3.style.display = "none";
			page4Part1 = document.querySelectorAll(".page4-1-boss");
			for (let i = 0; i < page4Part1.length; i++) {
				page4Part1[i].style.display = "none";
			}
			page4Part2.style.display = "none";
			page5.style.display = "none";
			page6.style.display = "block";
		};
	}
}
writingClick();
//logo 点击跳转到page1
let logo;
let page2btn;
function logoBtn() {
	logo = document.querySelectorAll(".logo");
	page2btn = document.querySelectorAll(".page2-nav1-box1 li:first-child");
	for (let i = 0; i < logo.length; i++) {
		logo[i].onclick = function () {
			bodyAll.style.display = "none";
			page1.style.display = "none";
			page2.style.display = "block";
			page3.style.display = "none";
			page4Part1 = document.querySelectorAll(".page4-1-boss");
			for (let i = 0; i < page4Part1.length; i++) {
				page4Part1[i].style.display = "none";
			}
			page4Part2.style.display = "none";
			page5.style.display = "none";
			page6.style.display = "none";
		};
	}
	for (let i = 0; i < page2btn.length; i++) {
		page2btn[i].onclick = function () {
			bodyAll.style.display = "none";
			page1.style.display = "none";
			page2.style.display = "block";
			page3.style.display = "none";
			page4Part1 = document.querySelectorAll(".page4-1-boss");
			for (let i = 0; i < page4Part1.length; i++) {
				page4Part1[i].style.display = "none";
			}
			page4Part2.style.display = "none";
			page5.style.display = "none";
			page6.style.display = "none";
		};
	}
}
logoBtn();

// page2-nav滚动切换
window.addEventListener("scroll", page2Nav);
function page2Nav() {
	let nav2 = document.querySelector(".page2-nav-scroll");
	let beforeScrollTop =
		document.body.scrollTop || document.documentElement.scrollTop;
	window.addEventListener("scroll", page2Nav2);
	function page2Nav2() {
		let afterScrollTop =
			document.body.scrollTop || document.documentElement.scrollTop;
		delta = afterScrollTop - beforeScrollTop;
		if (delta > 0 && afterScrollTop > 58) {
			nav2.style.transform = "translateY(-" + 52 + "px)";
		} else {
			nav2.style.transform = "translateY(" + 0 + "px)";
		}
	}
}
// page2-热搜
let navA2P2 = document.querySelectorAll(".left2-1-a2");
let navA3P2 = document.querySelectorAll(".left2-1-a3");
let navA4P2 = document.querySelectorAll(".left2-1-a4");
let part2P2 = document.querySelectorAll(".left2-1-box2");
let part3P2 = document.querySelectorAll(".left2-1-box3");
for (let a = 0; a < navA2P2.length; a++) {
	navA2P2[a].onclick = function () {
		for (let b = 0; b < navA2P2.length; b++) {
			navA2P2[b].classList.add("page2-blue");
			navA3P2[b].classList.remove("page2-blue");
			for (let a = 0; a < part2P2.length; a++) {
				part2P2[a].style.display = "block";
			}
			for (let a = 0; a < part3P2.length; a++) {
				part3P2[a].style.display = "none";
			}
		}
		for (let b = 0; b < navA4P2.length; b++) {
			navA4P2[b].style.opacity = 0;
		}
		window.scrollTo({
			top: 0,
			behavior: "smooth",
		});
	};
}
for (let a = 0; a < navA3P2.length; a++) {
	navA3P2[a].onclick = function () {
		for (let b = 0; b < navA3P2.length; b++) {
			navA2P2[b].classList.remove("page2-blue");
			navA3P2[b].classList.add("page2-blue");
			for (let a = 0; a < part2P2.length; a++) {
				part2P2[a].style.display = "none";
			}
			for (let a = 0; a < part3P2.length; a++) {
				part3P2[a].style.display = "flex";
			}
		}
		for (let b = 0; b < navA4P2.length; b++) {
			navA4P2[b].style.opacity = 0;
		}
		window.scrollTo({
			top: 0,
			behavior: "smooth",
		});
	};
}
// nav搜索聚焦
let sea = document.querySelectorAll(".nav2-1-box2-sea");
let butP2 = document.querySelectorAll(".nav2-1-box2-but");
let inputP2 = document.querySelectorAll(".nav2-1-box2-input");
let inputNav = document.querySelectorAll(".input-nav");
let svgNav = document.querySelectorAll(".nav2-1-box2-svg");
for (let a = 0; a < inputNav.length; a++) {
	inputNav[a].onfocus = function () {
		sea[a].style.backgroundColor = "#ffffff";
		inputNav[a].style.backgroundColor = "#ffffff";
		butP2[a].style.display = "none";
		inputP2[a].style.width = "380px";
		svgNav[a].style.color = "#056de8";
	};
	inputNav[a].onblur = function () {
		sea[a].style.backgroundColor = "#f6f6f6";
		inputNav[a].style.backgroundColor = "#f6f6f6";
		inputP2[a].style.width = "318px";
		svgNav[a].style.color = "#8590a6";
		setTimeout(() => {
			butP2[a].style.display = "block";
		}, 150);
	};
	svgNav[a].onclick = function () {
		console.log(1)
		let fuzzy = document.querySelectorAll(".fuzzy");
		for (let b = 0; b < navA2P2.length; b++) {
			navA2P2[b].classList.remove("page2-blue");
			navA3P2[b].classList.remove("page2-blue");
			for (let a = 0; a < part2P2.length; a++) {
				part2P2[a].style.display = "none";
			}
			for (let a = 0; a < part3P2.length; a++) {
				part3P2[a].style.display = "none";
			}
		}
		for (let b = 0; b < navA4P2.length; b++) {
			navA4P2[b].style.opacity = 1;
		}
		// 模糊搜索-根据标题
		function fuzzyQuery(keyWord) {
			for (let i = 0; i < fuzzy.length; i++) {
				if (fuzzy[i].innerText.indexOf(keyWord) >= 0) {
					if (fuzzy[i].parentNode.parentNode.className == "left2-1-box3") {
						fuzzy[i].parentNode.parentNode.style.display = "flex";
					} else {
						fuzzy[i].parentNode.parentNode.style.display = "block";
					}
				} else {
					fuzzy[i].parentNode.parentNode.style.display = "none";
				}
			}
		}
		fuzzyQuery(inputNav[a].value);
	}
	butP2[a].onclick = function () {
		console.log(1)
		let fuzzy = document.querySelectorAll(".fuzzy");
		for (let b = 0; b < navA2P2.length; b++) {
			navA2P2[b].classList.remove("page2-blue");
			navA3P2[b].classList.remove("page2-blue");
			for (let a = 0; a < part2P2.length; a++) {
				part2P2[a].style.display = "none";
			}
			for (let a = 0; a < part3P2.length; a++) {
				part3P2[a].style.display = "none";
			}
		}
		for (let b = 0; b < navA4P2.length; b++) {
			navA4P2[b].style.opacity = 1;
		}
		// 模糊搜索-根据标题
		function fuzzyQuery(keyWord) {
			for (let i = 0; i < fuzzy.length; i++) {
				if (fuzzy[i].innerText.indexOf(keyWord) >= 0) {
					if (fuzzy[i].parentNode.parentNode.className == "left2-1-box3") {
						fuzzy[i].parentNode.parentNode.style.display = "flex";
					} else {
						fuzzy[i].parentNode.parentNode.style.display = "block";
					}
				} else {
					fuzzy[i].parentNode.parentNode.style.display = "none";
				}
			}
		}
		fuzzyQuery(inputNav[a].value);
	}
	// 按下回车进行搜索
	inputNav[a].addEventListener("keyup", function (e) {
		// 只有按下的是回车键，才会触发
		if (e.key === "Enter") {
			// 如果用户输入不为空就进行
			if (inputNav[a].value.trim()) {
				fuzzyBoss();
			} /* else {
				alert("空白没有内容喔")
			} */
		}
	});
	// 模糊搜索-板块切换
	function fuzzyBoss() {
		let fuzzy = document.querySelectorAll(".fuzzy");
		for (let b = 0; b < navA2P2.length; b++) {
			navA2P2[b].classList.remove("page2-blue");
			navA3P2[b].classList.remove("page2-blue");
			for (let a = 0; a < part2P2.length; a++) {
				part2P2[a].style.display = "none";
			}
			for (let a = 0; a < part3P2.length; a++) {
				part3P2[a].style.display = "none";
			}
		}
		for (let b = 0; b < navA4P2.length; b++) {
			navA4P2[b].style.opacity = 1;
		}
		// 模糊搜索-根据标题
		function fuzzyQuery(keyWord) {
			for (let i = 0; i < fuzzy.length; i++) {
				if (fuzzy[i].innerText.indexOf(keyWord) >= 0) {
					if (fuzzy[i].parentNode.parentNode.className == "left2-1-box3") {
						fuzzy[i].parentNode.parentNode.style.display = "flex";
					} else {
						fuzzy[i].parentNode.parentNode.style.display = "block";
					}
				} else {
					fuzzy[i].parentNode.parentNode.style.display = "none";
				}
			}
		}
		fuzzyQuery(inputNav[a].value);
	}
}
// page2-最初显示推荐板块
for (let b = 0; b < navA2P2.length; b++) {
	navA2P2[b].classList.add("page2-blue");
	navA3P2[b].classList.remove("page2-blue");
	for (let a = 0; a < part2P2.length; a++) {
		part2P2[a].style.display = "block";
	}
	for (let a = 0; a < part3P2.length; a++) {
		part3P2[a].style.display = "none";
	}
}
for (let b = 0; b < navA4P2.length; b++) {
	navA4P2[b].style.opacity = 0;
}
// 热搜前三数字橙色
let colorP2 = document.querySelectorAll(".left2-1-box3-1");
for (let a = 0; a < colorP2.length; a++) {
	if (a <= 2) {
		colorP2[a].style.color = "#ff9607";
	}
}

// 用path优化
// 点击非评论wri部分则关闭wri部分
// 评论点击发送
let com0;
let com1;
let com2;
let tarName;
let parent1;
let comNum = document.querySelectorAll(".comNum");
function comAgain() {
	com1 = document.querySelectorAll(".content4-8-input1");
	com2 = document.querySelectorAll(".content4-8-input2");
	for (let i = 0; i < com2.length; i++) {
		com2[i].style.display = "none";
	}
	for (let i = 0; i < com1.length; i++) {
		com1[i].style.display = "block";
	}
}

// for (let i = 1; i < 3; i++) {
// comAll0(comAll[1]);
// }

//在元素后插入新元素 	由于有insertBefore方法 没有insertafter 得自己造轮子
function insertAfter(newElement, targetElement) {
	let parent = targetElement.parentNode;
	if (parent.lastChild == targetElement) {
		parent.appendChild(newElement);
	} else {
		parent.insertBefore(newElement, targetElement.nextSibling);
	}
}


// page
// 返回顶部
window.addEventListener("scroll", handle);
function handle() {
	var res = document.body.scrollTop || document.documentElement.scrollTop;
	var top = document.querySelector(".page-toTop");
	if (res >= 400) {
		top.style.opacity = 1;
		top.style.transform = "translateY(" + 0 + "px)";
	} else {
		top.style.opacity = 0;
		top.style.transform = "translateY(" + 40 + "px)";
	}
	top.move;
	top.onclick = function () {
		window.scrollTo({
			top: 0,
			behavior: "smooth",
		});
	};
}

// page3--nav滚动切换
window.addEventListener("scroll", page3Nav);
function page3Nav() {
	let beforeScrollTop =
		document.body.scrollTop || document.documentElement.scrollTop;
	let nav3 = document.querySelector(".page3-nav-scroll");
	window.addEventListener("scroll", page3Nav2);
	function page3Nav2() {
		let afterScrollTop =
			document.body.scrollTop || document.documentElement.scrollTop;
		delta = afterScrollTop - beforeScrollTop;
		if (delta > 0) {
			//&& afterScrollTop > 58
			nav3.style.transform = "translateY(-" + 52 + "px)";
		} else {
			nav3.style.transform = "translateY(" + 0 + "px)";
		}
	}
}

// page5--nav滚动切换
window.addEventListener("scroll", page5Nav);
function page5Nav() {
	let beforeScrollTop =
		document.body.scrollTop || document.documentElement.scrollTop;
	let nav5 = document.querySelector(".page5-nav-scroll");
	window.addEventListener("scroll", page5Nav2);
	function page5Nav2() {
		let afterScrollTop =
			document.body.scrollTop || document.documentElement.scrollTop;
		delta = afterScrollTop - beforeScrollTop;
		if (delta > 0) {
			//&& afterScrollTop > 58
			nav5.style.transform = "translateY(-" + 52 + "px)";
		} else {
			nav5.style.transform = "translateY(" + 0 + "px)";
		}
	}
}
//page5-个人资料点击
let page5But1 = document.querySelector(".header5-2-2-left");
let page5Ico1 = document.querySelector(".header5-2-2-left>span");
let page5Mes = document.querySelector(".header5-2-Mes");
page5Mes.style.height = 0 + "px";
page5But1.onclick = function () {
	let heightP5;
	page5Mes.style.height == 0 + "px"
		? (page5Mes.style.height = 100 + "%")
		: (page5Mes.style.height = 0 + "px");
	page5Mes.style.height != 0 + "px"
		? (page5Ico1.innerHTML = "&#xe603;")
		: (page5Ico1.innerHTML = "&#xee18;");
};
// page5-展示点击切换
let titP5;
let l1P5;
let zeroPas = document.querySelector(".content5-l1-art2");
let myPas = document.querySelectorAll(".content5-l1-art3");
let badyPas;
// 发布文章板块有无时显示
function newPas() {
	myPas = document.querySelectorAll(".content5-l1-art3");
	badyPas = document.querySelector(".content5-l1-art");
	for (let i = 0; i < myPas.length; i++) {
		if (myPas[i].style.display != "block") {
			myPas[i].style.display = "none";
			zeroPas.style.display = "block";
		} else {
			zeroPas.style.display = "none";
		}
	}
}
newPas();
// 收藏文章板块有无时显示
let colPas;
let zeroColPas = document.querySelector(".content5-l1-col3");
function newColPas() {
	colPas = document.querySelectorAll(".content5-l1-col2");
	for (let i = 0; i < colPas.length; i++) {
		if (colPas[i].style.display != "block") {
			colPas[i].style.display = "none";
			zeroColPas.style.display = "block";
		} else {
			zeroColPas.style.display = "none";
		}
	}
}
newColPas();
// 点击收藏文章
let but0ColP5;
let but1ColP5;
let but2ColP5;
let userId;
let articleId;
function btnColPeo() {
	but0ColP5 = document.querySelectorAll(".content5-l1-col3-but");
	but1ColP5 = document.querySelectorAll(".content5-l1-col3-but1");
	but2ColP5 = document.querySelectorAll(".content5-l1-col3-but2");
	userId = document.querySelectorAll(".content5-l1-col2-use > span").value;
	articleId = document.querySelectorAll(".content5-l1-col2-text >span").value;
	for (let i = 0; i < but1ColP5.length; i++) {
		if (but1ColP5[i].innerText == "已收藏") {
			but1ColP5[i].onmouseover = function () {
				but1ColP5[i].innerHTML = "取消收藏";
			};
			but1ColP5[i].onmouseout = function () {
				but1ColP5[i].innerHTML = "已收藏";
			};
		}
		// 取消收藏
		but0ColP5[i].onclick = function () {
			but1ColP5[i].style.display == "block" ? butColP51() : butColP52();
			function butColP51() {
				but2ColP5[i].style.display = "block";
				but1ColP5[i].style.display = "none";
				let xhr = new XMLHttpRequest();
				xhr.open(
					"GET",
					"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/articleCollections/cancel?&userId=" +
					userId[i] +
					"&articleId=" +
					articleId[i]
				);
				xhr.setRequestHeader(
					"Content-Type",
					"application/json"
				);
				xhr.setRequestHeader("token", sessionStorage.getItem('token'));
				xhr.send();
				xhr.onreadystatechange = function () {
					if (xhr.readyState === 4) {
						if (xhr.status >= 200 && xhr.status < 300) {
						}
					}
				};
			}
		};
		// 收藏
		function butColP52() {
			but2ColP5[i].style.display = "none";
			but1ColP5[i].style.display = "block";
			// 请求
			let xhr = new XMLHttpRequest();
			xhr.open(
				"GET",
				"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/articleCollections/collect?&userId=" +
				userId[i] +
				"&articleId=" +
				articleId[i]
			);
			xhr.setRequestHeader("Content-Type", "application/json");
			xhr.setRequestHeader("token", sessionStorage.getItem('token'));
			xhr.send();
			xhr.onreadystatechange = function () {
				if (xhr.readyState === 4) {
					if (xhr.status >= 200 && xhr.status < 300) {
					}
				}
			};
		}
	}
}
btnColPeo();
// page5-content点击切换
function newPes() {
	myPas = document.querySelectorAll(".content5-l1-art3");
	titP5 = document.querySelectorAll("div.content5-l1-1>a");
	l1P5 = document.querySelectorAll(".content5-l1-part");
	for (let i = 0; i < titP5.length; i++) {
		titP5[i].onclick = function () {
			for (let j = 0; j < l1P5.length; j++) {
				l1P5[j].style.display = "none";
			}
			for (let j = 0; j < titP5.length; j++) {
				titP5[j].classList.remove("page5-nav2-a");
			}
			titP5[i].classList.add("page5-nav2-a");
			l1P5[i].style.display = "block";
			if (i == 0) {
				if (myPas.length > 1) {
					zeroPas.style.display = "none";
					for (let i = 1; i < myPas.length; i++) {
						myPas[i].style.display = "block";
					}
				}
			}
			// console.log(i);
		};
	}
}
newPes();
// page5-关注者but
let numPeo;
let but0P5 = document.querySelectorAll(".content5-l1-peo2-but");
let but1P5 = document.querySelectorAll(".content5-l1-peo2-but1");
let but2P5 = document.querySelectorAll(".content5-l1-peo2-but2");
let but1P4 = document.querySelectorAll(".attentionOther .content5-l1-peo2-but1");
let but2P4 = document.querySelectorAll(".attentionOther .content5-l1-peo2-but2");
for (let i = 0; i < but1P5.length; i++) {
	but1P5[i].style.display = "block";
	but2P5[i].style.display = "none";
}
for (let i = 0; i < but1P4.length; i++) {
	but1P4[i].style.display = "none";
	but2P4[i].style.display = "block";
}
function btnPeo() {
	but0P5 = document.querySelectorAll(".content5-l1-peo2-but");
	but1P5 = document.querySelectorAll(".content5-l1-peo2-but1");
	but2P5 = document.querySelectorAll(".content5-l1-peo2-but2");
	but1P4 = document.querySelectorAll(".attentionOther .content5-l1-peo2-but1");
	but2P4 = document.querySelectorAll(".attentionOther .content5-l1-peo2-but2");
	for (let i = 0; i < but1P5.length; i++) {
		if (but1P5[i].innerText == "已关注") {
			// but1P5[i].style.display = "block";
			but1P5[i].onmouseover = function () {
				but1P5[i].innerHTML = "取消关注";
			};
			but1P5[i].onmouseout = function () {
				but1P5[i].innerHTML = "已关注";
			};
		}
		but0P5[i].onclick = function () {
			but1P5[i].style.display == "block" ? butP51() : butP52();
			function butP51() {
				numPeo = document.querySelector(".numPeoAll");
				numPeo.innerText = Number(numPeo.innerText) - 1;
				but2P5[i].style.display = "block";
				but1P5[i].style.display = "none";
				/* 				but2P4[i].style.display = "none";
								but1P4[i].style.display = "block"; */
				// 没有取消关注的接口 就用关注的接口了
				let xhr = new XMLHttpRequest();
				xhr.open(
					"GET",
					"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/follows/addFollow/1"
				);
				xhr.setRequestHeader(
					"Content-Type",
					"application/json"
				);
				xhr.setRequestHeader("token", sessionStorage.getItem('token'));
				xhr.send();
				xhr.onreadystatechange = function () {
					if (xhr.readyState === 4) {
						if (xhr.status >= 200 && xhr.status < 300) {
						}
					}
				};
			}
		};
		function butP52() {
			numPeo = document.querySelector(".numPeoAll")
			numPeo.innerText = Number(numPeo.innerText) + 1;
			but2P5[i].style.display = "none";
			but1P5[i].style.display = "block";
			/* 			but2P4[i].style.display = "block";
						but1P4[i].style.display = "none"; */
			// 关注请求
			let xhr = new XMLHttpRequest();
			xhr.open(
				"GET",
				"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/follows/addFollow/1"
			);
			xhr.setRequestHeader("Content-Type", "application/json");
			xhr.setRequestHeader("token", sessionStorage.getItem('token'));
			xhr.send();
			xhr.onreadystatechange = function () {
				if (xhr.readyState === 4) {
					if (xhr.status >= 200 && xhr.status < 300) {
					}
				}
			};
		}
	}
}
btnPeo();
// page5-关注与被关注切换but2 +有无关注者的页面显示
let but3P5 = document.querySelectorAll(".content5-l1-peo1-1>a");
let part1P5 = document.querySelectorAll(".content5-l1-peo2");
let part2P5 = document.querySelector(".content5-l1-peo3");
for (let j = 0; j < but3P5.length; j++) {
	if (j == 0) {
		but3P5[j].style.fontWeight = "bold";
	} else {
		but3P5[j].style.fontWeight = "normal";
	}
}
for (let i = 0; i < but3P5.length; i++) {
	but3P5[i].onclick = function () {
		part1P5 = document.querySelectorAll(".content5-l1-peo2");
		for (let j = 0; j < but3P5.length; j++) {
			but3P5[j].style.fontWeight = "normal";
		}
		this.style.fontWeight = "bold";
		if (i == 1) {
			for (let j = 0; j < part1P5.length; j++) {
				part1P5[j].style.display = "none";
			}
			part2P5.style.display = "block";
		}
		if (i == 0) {
			if (part1P5.length == 0) {
				part2P5.style.display = "block";
			} else {
				part2P5.style.display = "none";
				for (let j = 1; j < part1P5.length; j++) {
					part1P5[j].style.display = "flex";
				}
			}
		}
	};
}

// page5-收藏but2 创建收藏夹与关注收藏夹
/* let but4P5 = document.querySelectorAll(".content5-l1-col1-1>a");
let part3P5 = document.querySelector(".content5-l1-col2");
let part4P5 = document.querySelector(".content5-l1-col3");
for (let i = 0; i < but4P5.length; i++) {
	but4P5[i].onclick = function () {
		for (let j = 0; j < but3P5.length; j++) {
			but4P5[j].classList.remove("content5-l1-wei-col");
		}
		this.classList.add("content5-l1-wei-col");
		if (i == 0) {
			part3P5.style.display = "block";
			part4P5.style.display = "none";
		} else {
			part4P5.style.display = "block";
			part3P5.style.display = "none";
		}
	};
} */

// 七天免登录
// 封装cookie 对应cookie名 对应值 以及有效日期
/* function setCookie(cookName, cookieVal, expires) {
	let d = new Date();
	d.setDate(d.getDate() + expires);
	document.cookie =
		cookName + "=" + cookieVal + ";path=/;expires=" + d.toUTCString();
} */
// let seven = document.getElementById("seven");
/* getCookie("user");
function getCookie(cookName) {
	let cookie = document.cookie;
	let arr = cookie.split("; ");
	for (let i = 0; i < arr.length; i++) {
		// let n = arr[i].split("=");
		let newArr = arr[i].split("=");
		if (newArr[0] == cookName) {
			let obj = JSON.parse(newArr[1]);
			// username2.value = obj.username;
			// password2.value = obj.password;
		}
	}
} */
// 七天免登录
function setCookie(cname, cvalue, exdays) {
	var d = new Date();
	d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
	var expires = "expires=" + d.toGMTString();
	document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
	var name = cname + "=";
	var ca = document.cookie.split(';');
	for (var i = 0; i < ca.length; i++) {
		var c = ca[i].trim();
		if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
	}
	return "";
}
// 编辑个人资料
let upload = document.querySelector(".header5-2-2-right");
let myPartMes1 = document.querySelector(".header5-2-1");
let myPartMes2 = document.querySelector(".header5-2-2");
let myPartMes3 = document.querySelector(".header5-2-3");
let upAvatar = document.querySelector(".header5-2-change");
let btnMyMes = document.querySelector(".btnMyMes");
let myId = document.querySelectorAll(".myId");
let userName = document.querySelectorAll(".userName");
let description = document.querySelectorAll(".description");
let phone = document.querySelectorAll(".phone");
// 记住密码 登录
let username2 = document.querySelector("#username2");
let remember = document.querySelector("#remember");
let password2 = document.querySelector("#password2");
let signP1 = document.querySelector("#signP1");
let signTip = document.querySelector(".tip");
let seven = document.getElementById("seven");
if (localStorage.getItem("username") && localStorage.getItem("password")) {
	username2.value = localStorage.getItem("username");
	password2.value = localStorage.getItem("password");
	remember.checked = true;
}
signP1.onclick = function firstUp() {
	if (password2.value == "" || username2.value == "") {
		alert("是不是漏填了什么~");
	} else {
		let obj = {
			username: username2.value,
			password: password2.value
		}
		let xhr = new XMLHttpRequest();
		xhr.open(
			"POST",
			"https://demo.smalla.cloud/login"
		);
		xhr.setRequestHeader("Content-Type", "application/json");
		xhr.send(JSON.stringify(obj));
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4) {
				if (xhr.status >= 200 && xhr.status < 300) {
					let info1 = JSON.parse(xhr.responseText);
					sessionStorage.setItem('token', info1.data.token);
					sessionStorage.setItem('username', username2.value);
					// 文章点赞数 评论数 等
					// signData();
					// 请求个人信息
					myMes();
					// 文章渲染
					myTitAll();
					page1.style.display = "none";
					page2.style.display = "block";
					// 记住密码
					if (remember.checked) {
						localStorage.setItem("username", username2.value);
						localStorage.setItem("password", password2.value);
					} else {
						localStorage.removeItem("username");
						localStorage.removeItem("password");
					}
					// 七天免登录
					let password = password2.value
					console.log(password)
					/* 					if (seven.checked) {
											setCookie("username", username2.value, 7);
											setCookie("password", password, 7);
											setCookie("token", info1.data.token, 7);
										} */
					alert(JSON.parse(xhr.responseText).message)
					// console.log(info1);
					// return info1;}
				} else {
					alert("登录失败");
				}
			}
		}
	};
}
function myMes() {
	userId = document.querySelectorAll(".content5-l1-col2-use > span").values;
	let xhr = new XMLHttpRequest();
	xhr.open(
		"GET",
		"https://demo.smalla.cloud/user/info"
	);
	xhr.setRequestHeader("Content-Type", "application/json");
	xhr.setRequestHeader('token', sessionStorage.getItem('token'));
	xhr.send();
	xhr.onreadystatechange = function () {
		if (xhr.readyState === 4) {
			if (xhr.status >= 200 && xhr.status < 300) {
				let info1 = JSON.parse(xhr.responseText).data.user
				if (info1.username) {
					for (let i = 0; i < userName.length; i++) {
						userName[i].innerText = info1.username;
					}
				}
				if (info1.id) {
					for (let i = 0; i < myId.length; i++) {
						myId[i].innerText = info1.id;
					}
				} else {
					for (let i = 0; i < myId.length; i++) {
						myId[i].innerText = "(设一个专属id吧~)";
					}
				}
				if (info1.avatar) {
					for (let i = 0; i < avatar.length; i++) {
						avatar[i].setAttribute("src", info1.avatar);
						// avatar[i].setAttribute("src", "images/page5-peo.jpg");
					}
				}
				if (info1.description) {
					for (let i = 0; i < description.length; i++) {
						description[i].innerText = info1.description;
					}
				} else {
					for (let i = 0; i < description.length; i++) {
						description[i].innerText = "(能来一段freestyle的自述嘛)";
					}
				}
				if (info1.phone) {
					for (let i = 0; i < phone.length; i++) {
						phone[i].innerText = info1.phone;
					}
				} else {
					for (let i = 0; i < phone.length; i++) {
						phone[i].innerText = "(your phone, 明白？)";
					}
				}
			} else { console.log('请求个人消息失败') }
		}
	}
}
// 页面刷新
window.onload = function checkCookie() {
	var user = sessionStorage.getItem("username");
	var token0 = sessionStorage.getItem("token");
	// var token0 = sessionStorage.getItem("token");
	if (localStorage.getItem("urlNew2") != "" || localStorage.getItem("urlNew2") != null) {
		photoUp3.setAttribute("src", localStorage.getItem("urlNew2"))
	}
	if (token0 != "" && token0 != null) {
		// 请求
		page1.style.display = "none";
		page2.style.display = "block";
		myMes();
		alert("欢迎：" + user);
		myTitAll();

	}
}
// 注册交互
let btn = document.getElementById("sign0P1");
let username1 = document.getElementById("username1");
let phone1 = document.getElementById("phone1");
let password1 = document.getElementById("password1");
btn.onclick = function () {
	if (username1.value == "" || phone1.value == "" || password1.value == "") {
		alert("是不是漏填了信息啦~");
	} else {
		//手机号信息验证（11位数）
		var CellPoe = /^[1][3,4,5,7,8][0-9]{9}$/;
		if (!CellPoe.test(phone1.value)) {
			alert("手机号信息有误,请输入正确的手机号喔~");
		} else {
			let xhr = new XMLHttpRequest();
			let obj = {
				username: username1.value,
				password: password1.value,
				phone: phone1.value
			};
			xhr.open(
				"POST",
				"https://demo.smalla.cloud/register"
			);
			xhr.setRequestHeader("Content-Type", "application/json");
			xhr.send(JSON.stringify(obj));
			xhr.onreadystatechange = function () {
				if (xhr.readyState === 4) {
					if (xhr.status >= 200 && xhr.status < 300) {
						tit[1].classList.add("right-tit1");
						tit[0].classList.remove("right-tit1");
						sign[0].style.display = "none";
						sign[1].style.display = "block";
						phone1.innerText = "";
						username1.innerText = "";
						password1.innerText = "";
						alert(JSON.parse(xhr.responseText).message)
					} else {
						alert(JSON.parse(xhr.responseText).code)
					}
					// console.log(dataa)
				}
			}
			/* 		const promise = new Promise((resolve) => {
						let obj = {
							username: username1.value,
							password: password1.value,
							phone: phone1.value
						};
						getData(obj, "https://demo.smalla.cloud/register");
						resolve(1)
					})
					promise.then(res => {
						console.log(info1)
						console.log(res)
						if (res) {
							tit[1].classList.add("right-tit1");
							tit[0].classList.remove("right-tit1");
							sign[0].style.display = "none";
							sign[1].style.display = "block";
							phone1.innerText = "";
							username1.innerText = "";
							password1.innerText = "";
							alert(info1.message)
						} else {
							alert("该账号已注册/注册失败~")
						}
					}) */


			/* 			getInfo();
						function getInfo() {
							let obj = {
								username: username1.value,
								password: password1.value,
								phone: phone1.value
							};
							getData(obj, "https://demo.smalla.cloud/register");
							console(info1)
							if (info1) {
								tit[1].classList.add("right-tit1");
								tit[0].classList.remove("right-tit1");
								sign[0].style.display = "none";
								sign[1].style.display = "block";
								phone1.innerText = "";
								username1.innerText = "";
								password1.innerText = "";
								alert(info1.data.message)
							} else {
								alert("该账号已注册/注册失败~")
							}
						} */
		}
	}
}
// 找回密码
let find = document.querySelector("#pas-forget");
let findBoss = document.querySelector(".form-box-find");
let rightP1 = document.querySelector(".form-box-right");
let sign2P1 = document.querySelector("#sign2P1");
let username3 = document.getElementById("username3");
let phone3 = document.getElementById("phone3");
let password3 = document.getElementById("password3");
/* find.onclick = function () {
	rightP1.style.display = "none";
	findBoss.style.display = "block";
};
sign2P1.onclick = function () {
	if (username3.value == "" || phone3.value == "" || password3.value == "") {
		alert("是不是漏填了信息啦~");
	} else {
		let xhr = new XMLHttpRequest();
		xhr.open(
			"POST",
			"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/user/modify"
		);
		xhr.setRequestHeader("Content-Type", "application/json");
		xhr.send(
			"phone = " +
			phone3.value +
			"&username = " +
			username3.value +
			"&password = " +
			password3.value
		);
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4) {
				if (xhr.status >= 200 && xhr.status < 300) {
					rightP1.style.display = "block";
					findBoss.style.display = "none";
					alert("亲 请牢记密码~");
				}
			}
		};
	}
}; */
// i=0文章点赞数 i=1文章评论数 i=2展示关注的所有作者 i=3收藏文章 
let agreeNum = document.querySelectorAll(".agreeNum");
let urls = [
	"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/articleLikes/num/{articleId}?responseId=1134226",
	"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/comments/get/{articalId}",
	"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/follows/getAllFollowers",
	"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/articleCollections/show"
];
let signData = function () {
	for (let i = 0; i < urls.length; i++) {
		let xhr = new XMLHttpRequest();
		xhr.open("GET", urls[i]);
		xhr.setRequestHeader("Content-Type", "application/json");
		xhr.setRequestHeader("token", sessionStorage.getItem('token'));
		xhr.send();
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4) {
				if (xhr.status >= 200 && xhr.status < 300) {
					if (i == 0 && xhr.response.data) {
						console.log(xhr.response.data.num);
						for (let i = 0; i < agreeNum.length; i++) {
							agreeNum[i].innerText = xhr.response.data.num;
						}
					}
					if (i == 1 && xhr.response.data) {
						for (let i = 0; i < comNum.length; i++) {
							comNum[i].innerHTML = xhr.response.data.num;
						}
					}/*  else {
						comNum = document.querySelectorAll(".comNum");
						for (let i = 0; i < comNum.length; i++) {
							comNum[i].innerHTML = 0;
						}
					} */
					if (i == 2) {
						let peo;
						peo = part1P5[0].cloneNode(true);
						let followedName = peo.querySelector(".content5-l1-peo2-name > a");
						followedName.innerText = xhr.response.followedName;
						let followedId = peo.querySelector(".content5-l1-peo2-id > a");
						followedId.innerText = xhr.response.followedId;
						peo.style.display = "flex";
						let peoAll = document.querySelector(".peoAll");
						peoAll.appendChild(peo);
						// 点击关注
						btnPeo();
					}
					// 获取收藏文章id-无数据
					if (i == 3) {
						// console.上传log(1);
					}
				}
			}
		};
	}
};
// textarea 自适应高度
let textarea = document.querySelector("textarea");
textarea.addEventListener("input", (e) => {
	textarea.style.height = "30px";
	textarea.style.height = e.target.scrollHeight + "px";
});
/* 点击文章提交页跳到个人中心页 并发布文章 */
let mesUp = document.querySelector(".content6-btn");
let mesStop = document.querySelector(".img6-3");
let title = document.querySelector(".titWri");
let content = document.querySelector(".textWri");
let pic = document.querySelector(".file");
let img = document.querySelector(".img");
let wriBtn = document.querySelector(".content5-l1-art1-2-1");
let photoUp2 = document.querySelector(".header5-2-img");
let imgMy; //发布照片的中间商
let num = 2;// 评论赋能
// 取消上传-发布页
// 上传照片
let file = document.querySelector("#file");
let photoUp = document.querySelector(".photoUp");
let changeFile; //默认小图标
let imgUp; //copy照片src
let reader;
let urlNew3 = "";
file.onchange = function () {
	changeFile = 0; //在发布时验证是否上传封面
	let fileData = this.files[0]; //获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件
	// console.info(fileData.type)
	if (!/image\/\w+/.test(fileData.type)) {
		alert("看清楚，这个需要图片！");
		return false;
	}
	photoUp.style.zIndex = 0; //默认小图标显示问题
	reader = new FileReader(); //读取文件内容
	reader.readAsDataURL(fileData); //异步读取文件内容，结果用data:url的字符串形式表示
	/*当读取操作成功完成时调用*/
	reader.onload = function (e) {
		imgUp = this.result;
		let xhr = new XMLHttpRequest();
		alert('封面上传中~')
		let formData = new FormData();
		formData.append("file", fileData)
		xhr.open(
			"POST",
			"https://pic.smalla.cloud/api/v1/upload"
		);
		mesStop.onclick = function () {
			alert('暂停上传')
			xhr.abort();
			photoUp.style.zIndex = -1;
			photoUp.setAttribute("stc", "")
			urlNew3 = "";
			imgUp = ""
			return;
		}
		xhr.setRequestHeader("token", sessionStorage.getItem('token'));
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4) {
				if (xhr.status >= 200 && xhr.status < 300) {
					if (JSON.parse(xhr.response).message != "上传成功") {
						alert(JSON.parse(xhr.response).message);
						urlNew3 = "";
						imgUp = "";
						xhr.abort();
						return;
					} else {
						photoUp.setAttribute("src", reader.result);
						urlNew3 = JSON.parse(xhr.response).data.links.url;
						imgUp = "";
						alert("文章封面上传成功~");
					};
				} else {
					alert("上传失败~");
					urlNew3 = "";
					imgUp = "";
				}
			}
		};
		xhr.send(formData);
	}
};
// 点击发布按钮
let pasNum = 0;
mesUp.onclick = function () {
	if (title.value == "" || content.value == "") {
		alert("请全部填写喔~");
	} else {
		let xhr = new XMLHttpRequest();
		let data = {
			title: title.value,
			content: content.value,
			pic: urlNew3
		}
		let data2 = {
			title: title.value,
			content: content.value
		}
		xhr.open(
			"POST",
			"https://demo.smalla.cloud/articles/add"
		);
		xhr.setRequestHeader("Content-Type", "application/json");
		xhr.setRequestHeader("token", sessionStorage.getItem('token'));
		if (changeFile == 0) {
			xhr.send(JSON.stringify(data));
		} else {
			xhr.send(JSON.stringify(data2));
		}
		alert("数据上传中,请稍后~");
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4) {
				if (xhr.status >= 200 && xhr.status < 300) {
					myPas = document.querySelectorAll(".content5-l1-art3")
					for (let i = 1; i < myPas.length; i++) {
						myPas[i].remove();
					}
					pasUp(title.value, content.value, imgUp, urlNew3);
					comAll0();
					myTitAll();
					page6.style.display = "none";
					page5.style.display = "block";
					urlNew3 = "";
					imgUp = "";
					alert("发布成功噜~");
				} else {
					alert("发布失败")
				}
			};
		}
	}
}
// 评论赋能
function comAll0() {
	document.onclick = function (event) {
		//评论点击显示
		com0 = document.querySelectorAll(".content4-8-input");
		com1 = document.querySelectorAll(".content4-8-input1");
		com2 = document.querySelectorAll(".content4-8-input2");
		let comAllLocation = event.target.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.querySelector(".content4-box10");
		for (let i = 0; i < com0.length; i++) {
			com0[i].onclick = function comBox() {
				for (let i = 0; i < com1.length; i++) {
					com1[i].style.display = "none";
				}
				for (let i = 0; i < com2.length; i++) {
					com2[i].style.display = "flex";
				}
			};
		}
		// console.log(event.target.className)
		if (
			event.target.className != "content4-8-bot content4-8-input2" &&
			event.target.className != "content4-8-input content4-8-input2 contentUp" &&
			event.target.className != "content4-8-ico iconfont" &&
			event.target.className != "content4-8-input content4-8-input2" &&
			event.target.className != "content4-8-but" &&
			event.target.className != "content4-8-all" &&
			event.target.className != "content4-8-input content4-8-input1" &&
			event.target.className != "content4-8-top"
		) {
			comAgain();
		} else if (event.target.className == "content4-8-but") {
			parent1 = event.target.parentNode.previousElementSibling;
			let articleId1;
			if (parent1.value != "") {
				// for (let i = 1; i < comAll.length; i++) {
				// if (comAll[1].style.display == "block") {
				if (parent1.getAttribute("placeholder") == "评论第一条，友善第一条") {
					let comAll2 = comAll[0].querySelector(".content4-10-com");
					let comBox1 = comAll2.cloneNode(true);
					comBox1.style.display = "flex";
					// console.log(comBox1);
					comAllLocation.appendChild(comBox1);
					articleId1 = comAllLocation.parentNode.parentNode.getAttribute("code");
					// console.log(articleId1)
					let contentDown = comBox1.querySelector(".content4-10-box2");
					contentDown.innerText = parent1.value;
					// 添加删除点击
					let delCom = comBox1.querySelector(".delCom");
					delCom.onclick = function () {
						if (confirm("顶真要删除嘛？")) {
							let xhr = new XMLHttpRequest();
							let obj = {

							}
							xhr.open(
								"DELETE",
								"https://demo.smalla.cloud/comments/delete"
							);
							xhr.setRequestHeader(
								"Content-Type",
								"application/x-www-form-urlencoded"
							);
							xhr.setRequestHeader("token", sessionStorage.getItem('token'));
							xhr.send();
							xhr.onreadystatechange = function () {
								if (xhr.readyState === 4) {
									if (xhr.status >= 200 && xhr.status < 300) {
										comBox1.remove();
										comNum = detail.querySelectorAll(".comNum");
										for (let i = 0; i < comNum.length; i++) {
											comNum[i].innerText = Number(comNum[i].innerText) - 1;
										}
										alert("删除成功");
										return
									}
								}
							};
						}
					}
					comAgain();
					// 添加评论点赞点击
					function agreeClick() {
						let agreeComBox = comBox1.querySelector(".agreeComBox");
						let agreeComNum = comBox1.querySelector(".agreeComNum");
						let num33 = 1;
						agreeComBox.onclick = function () {
							num33 == 1 ? agreeComUp() : agreeComDown();
							function agreeComUp() {
								let xhr = new XMLHttpRequest();
								xhr.open(
									"POST",
									"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/comments/commentLike/{commentId}"
								);
								xhr.setRequestHeader(
									"Content-Type",
									"application/json"
								);
								xhr.setRequestHeader("token", sessionStorage.getItem('token'));
								xhr.send();
								xhr.onreadystatechange = function () {
									if (xhr.readyState === 4) {
										if (xhr.status >= 200 && xhr.status < 300) {
											agreeComNum.innerText = Number(agreeComNum.innerText) + 1;
											agreeComBox.style.color = "#056de8";
											num33 = 0;
										}
									}
								};
							}
							function agreeComDown() {
								//没有取消评论点赞就用取消点赞的接口了
								let xhr = new XMLHttpRequest();
								xhr.open(
									"POST",
									"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/articleLikes/"
								);
								xhr.setRequestHeader(
									"Content-Type",
									"application/json"
								);
								xhr.setRequestHeader("token", sessionStorage.getItem('token'));
								xhr.send();
								xhr.onreadystatechange = function () {
									if (xhr.readyState === 4) {
										if (xhr.status >= 200 && xhr.status < 300) {
											agreeComNum.innerText = Number(agreeComNum.innerText) - 1;
											agreeComBox.style.color = "#8590a6";
											num33 = 1;
										}
									}
								};
							}
						}



					}
					agreeClick();
				} else {
					let comBox1;
					let comAll2 = document.querySelector(".content4-10-com");
					comBox1 = comAll2.cloneNode(true);
					comBox1.style.display = "flex";
					comAllLocation.appendChild(comBox1);
					articleId1 = comAllLocation.parentNode.parentNode.querySelector('.boss');
					// 添加删除点击
					let delCom = comBox1.querySelector(".delCom");
					delCom.onclick = function () {
						if (confirm("顶真要删除嘛？")) {
							let xhr = new XMLHttpRequest();
							xhr.open(
								"DELETE",
								"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/comments/delete"
							);
							xhr.setRequestHeader(
								"Content-Type",
								"application/json"
							);
							xhr.setRequestHeader("token", sessionStorage.getItem('token'));
							xhr.send();
							xhr.onreadystatechange = function () {
								if (xhr.readyState === 4) {
									if (xhr.status >= 200 && xhr.status < 300) {
										comBox1.remove();
										alert("删除成功");
										comNum = detail.querySelectorAll(".comNum");
										for (let i = 0; i < comNum.length; i++) {
											comNum[i].innerText = Number(comNum[i].innerText) - 1;
										}
										return;
									}
								}
							};
						}
					}
					// 添加评论点赞点击
					function agreeClick() {
						let agreeComBox = comBox1.querySelector(".agreeComBox");
						let agreeComNum = comBox1.querySelector(".agreeComNum");
						let num33 = 1;
						agreeComBox.onclick = function () {
							num33 == 1 ? agreeComUp() : agreeComDown();
							function agreeComUp() {
								let xhr = new XMLHttpRequest();
								xhr.open(
									"POST",
									"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/comments/commentLike/{commentId}"
								);
								xhr.setRequestHeader(
									"Content-Type",
									"application/json"
								);
								xhr.setRequestHeader("token", sessionStorage.getItem('token'));
								xhr.send();
								xhr.onreadystatechange = function () {
									if (xhr.readyState === 4) {
										if (xhr.status >= 200 && xhr.status < 300) {
											agreeComNum.innerText = Number(agreeComNum.innerText) + 1;
											agreeComBox.style.color = "#056de8";
											num33 = 0;
										}
									}
								};
							}
							function agreeComDown() {
								//没有取消评论点赞就用取消点赞的接口了
								let xhr = new XMLHttpRequest();
								xhr.open(
									"POST",
									"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/articleLikes/"
								);
								xhr.setRequestHeader(
									"Content-Type",
									"application/json"
								);
								xhr.setRequestHeader("token", sessionStorage.getItem('token'));
								xhr.send();
								xhr.onreadystatechange = function () {
									if (xhr.readyState === 4) {
										if (xhr.status >= 200 && xhr.status < 300) {
											agreeComNum.innerText = Number(agreeComNum.innerText) - 1;
											agreeComBox.style.color = "#8590a6";
											num33 = 1;
										}
									}
								};
							}
						}
					}
					agreeClick();
					let contentDown2 = comBox1.querySelector(".content4-10-box2");
					let back = document.createElement("span");
					back.innerText = "回复" + tarName + ":";
					contentDown2.innerHTML = back.innerText + "&emsp;" + parent1.value;
					com1 = detail.querySelectorAll(".content4-8-input1");
					com2 = detail.querySelectorAll(".content4-8-input2");
					for (let i = 0; i < com1.length; i++) {
						com1[i].style.display = "block";
					}
					for (let i = 0; i < com2.length; i++) {
						com2[i].style.display = "none";
					}
				}
				// 评论数量加1
				let comNum = event.target.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.querySelectorAll(".comNum");
				// comNum = document.querySelectorAll(".comNum");
				for (let i = 0; i < comNum.length; i++) {
					comNum[i].innerText = Number(comNum[i].innerText) + 1;
				}
				// 添加评论接口
				let xhr = new XMLHttpRequest();
				xhr.open(
					"POST",
					"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/comments/add"
				);
				xhr.setRequestHeader("Content-Type", "application/json");
				xhr.setRequestHeader("token", sessionStorage.getItem('token'));
				xhr.send(
					"content = " + parent1.value + "&articleId = " + articleId1 + "&parentReviewld = null"
				);
				xhr.onreadystatechange = function () {
					if (xhr.readyState === 4) {
						if (xhr.status >= 200 && xhr.status < 300) {
							comAllLocation.style.display = "block"
						}
					}
				}
				parent1.value = "";
				return;
			} else {
				alert("不能水评论喔~")
			}
			// }
		}
		if (event.target.className == "content4-10-box2") {
			let tar = event.target.parentNode;
			tarName = tar.firstElementChild.firstElementChild.innerText;
			let sendCom1 = com2[0].cloneNode(true);
			let sendCom2 = com2[1].cloneNode(true);
			sendCom1.style.marginTop = 20 + "px";
			sendCom1.style.width = 100 + "%";
			sendCom1.setAttribute("placeholder", "回复" + tarName);
			sendCom1.style.display = "block";
			sendCom2.style.display = "flex";
			tar.appendChild(sendCom1);
			tar.appendChild(sendCom2);
		}
		if (event.target.className == "comBack") {
			let tar = event.target.parentNode.parentNode.parentNode;
			tarName = tar.firstElementChild.firstElementChild.innerText;
			let sendCom1 = com2[0].cloneNode(true);
			let sendCom2 = com2[1].cloneNode(true);
			sendCom1.style.marginTop = 20 + "px";
			sendCom1.style.width = 100 + "%";
			sendCom1.setAttribute("placeholder", "回复" + tarName);
			sendCom1.style.display = "block";
			sendCom2.style.display = "flex";
			tar.appendChild(sendCom1);
			tar.appendChild(sendCom2);
		}
		if (event.target.className == "content4-10-3-ico iconfont" || event.target.className == "content4-10-3-wri") {
			let tar = event.target.parentNode.parentNode.parentNode.parentNode.parentNode;
			tarName = tar.firstElementChild.firstElementChild.innerText;
			let sendCom1 = com2[0].cloneNode(true);
			let sendCom2 = com2[1].cloneNode(true);
			sendCom1.style.marginTop = 20 + "px";
			sendCom1.style.width = 100 + "%";
			sendCom1.setAttribute("placeholder", "回复" + tarName);
			sendCom1.style.display = "block";
			sendCom2.style.display = "flex";
			tar.appendChild(sendCom1);
			tar.appendChild(sendCom2);
		}
	}
}
// 文章渲染
function pasUp(titleValue, contentValue, imgUpValue, id, urlNew0) {
	// myPas.style.display = "block";
	zeroPas.style.display = "none";
	wriBtn.style.display = "block";
	// 发布文章的渲染
	let node;
	// 克隆
	node = myPas[0].cloneNode(true);
	node.style.display = "block";
	let titMy = node.querySelector(".btn1P2");
	titMy.innerText = titleValue;
	titMy.setAttribute("id", id);
	let textMy0 = node.querySelector(".left2-1-box2-wri");
	textMy0.innerText = contentValue;
	// 点击tit进入文章详情
	let myTit = node.querySelector(".btn1P2");
	myTit.onclick = function () {
		bodyAll.style.display = "none";
		page5.style.display = "none";
		detail.style.display = "block";
	}
	// 时间来不及-文段p标签格式暂定
	let textMy1 = node.querySelector(".left2-1-box2-wri2 > p");
	textMy1.innerText = contentValue;
	imgMy = node.querySelectorAll(".left2-1-box2-img > img");
	if (urlNew0 != "" && urlNew0 != null) {
		for (let i = 0; i < imgMy.length; i++) {
			imgMy[i].style.width = 190 + "px";
			imgMy[i].style.height = 105 + "px";
			imgMy[i].setAttribute("src", imgUpValue);
		}
	} else {
		for (let i = 0; i < imgMy.length; i++) {
			imgMy[i].style.width = 0;
			imgMy[i].style.height = 0;
			imgMy[i].style.display = "none"
		}
	}
	badyPas.appendChild(node);
	// 发布文章详情页面
	let detail;
	n += 1;
	detail = page4Part1[0].cloneNode(true);
	detail.style.display = "none";
	let ava = detail.querySelector(".content4-2-img img");
	let ava2 = detail.querySelector(".navImg>img");
	let user = detail.querySelector(".content4-2-head-tit");
	ava.setAttribute("src", photoUp2.src);
	ava2.setAttribute("src", photoUp2.src);
	/* 	ava.classList.remove("avatarOther");
		ava.classList.add("avatar");
		ava.classList.add("myClick");
		ava2.classList.remove("avatarOther");
		ava2.classList.add("avatar");
		user.classList.remove("userNameOther");
		user.classList.add("userName"); */
	let nameValue = document.querySelector(".header5-2-name");
	user.innerText = nameValue.innerText;
	let titDetail = detail.querySelector(".content4-2-tit");
	titDetail.innerText = title.value;
	// 去除自己的关注按钮
	let attention1 = detail.querySelector(".content5-l1-peo2-but");
	attention1.remove();
	let imgDetail = detail.querySelector(".content4-box1 img");
	// let imgBox = detail.querySelector(".content4-2-img");
	if (urlNew0 != "" && urlNew0 != null) {
		imgDetail.setAttribute("src", imgUpValue);
	} else {
		imgDetail.style.display = "none";
		// imgBox.style.display = "none";
	}
	let textDetail = detail.querySelector(".content4-box4 p");
	textDetail.innerText = contentValue;
	// console.log(detail);
	//logo点击事件
	logoBtn();
	//getItem('token')点击事件
	navImgBtn();
	//点击返回事件
	meBtn();
	//点击写文章
	writingClick();
	// 点击图片放大预览
	bigBtn();
	//评论赋id
	let idMes = detail.querySelector('.content4-10-box');
	idMes.setAttribute('id', id);
	// 渲染评论
	function mesDown() {
		let xhr = new XMLHttpRequest();
		xhr.open(
			"GET",
			"https://demo.smalla.cloud/comments/get/" + id
		);
		xhr.setRequestHeader(
			"Content-Type",
			"application/json"
		);
		xhr.setRequestHeader("token", sessionStorage.getItem('token'));
		xhr.send();
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4) {
				if (xhr.status >= 200 && xhr.status < 300) {

					console.log(JSON.parse(xhr.response))
				}
			}
		};
	}
	mesDown();
	// comFirstBox();
	// 点击getItem('token')进个人中心页
	myClickImg = detail.querySelectorAll(".myClick");
	for (let i = 0; i < myClickImg.length; i++) {
		myClickImg[i].style.cursor = "pointer";
	}
	myClick();
	//评论赋能
	// let btng = detail.querySelector(".content4-box10");
	// page4Part1 = document.querySelectorAll(".page4-1-boss")
	// let btng = page4Part1[page4Part1.length - 1].querySelector(".content4-box10")
	// num += 1;
	comAll0();
	//文章点击事件
	clickNew();
	// 文章删除
	let del1 = node.querySelector(".del");
	del1.setAttribute("id", id);
	// let del2 = detail.querySelector(".del");
	// del2.onclick = delClick();
	del1.onclick = function delClick() {
		if (confirm("顶真要删除嘛？")) {
			let xhr = new XMLHttpRequest();
			xhr.open(
				"DELETE",
				"https://demo.smalla.cloud/articles/" + id
			);
			xhr.setRequestHeader(
				"Content-Type",
				"application/json"
			);
			xhr.setRequestHeader("token", sessionStorage.getItem('token'));
			xhr.send();
			xhr.onreadystatechange = function () {
				if (xhr.readyState === 4) {
					if (xhr.status >= 200 && xhr.status < 300) {
						node.remove();
						detail.remove();
						alert("删除成功");
						// 文章板块有无时显示
						newPas();
					} else { alert('删除失败') }
				}
			};
		}
	};
	//my文章点赞数
	let agreeBox = detail.querySelectorAll(".agreeBox");
	let agreeMyNum = detail.querySelectorAll(".agreeMyNum");
	let agreeBox2 = node.querySelector('.agreeBox');
	let agreeMyNum2 = node.querySelector('.agreeMyNum');
	agreeMyNum2.style.fontWeight = "normal";
	agreeMyNum2.style.fontSize = 14 + "px";
	function agreeMyNumFirst() {
		let xhr = new XMLHttpRequest();
		xhr.open(
			"GET",
			"https://demo.smalla.cloud/articleLikes/num/" + id
		);
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.setRequestHeader("token", sessionStorage.getItem('token'));
		xhr.send();
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4) {
				if (xhr.status >= 200 && xhr.status < 300) {
					for (let i = 0; i < agreeMyNum.length; i++) {
						agreeMyNum[i].innerText = JSON.parse(xhr.response).data.num
					}
					agreeMyNum2.innerText = JSON.parse(xhr.response).data.num
				}
			}
		};
	}
	agreeMyNumFirst();
	//文章赞同接口
	let num11 = 1;
	function agreeMyNumUp() {
		let xhr = new XMLHttpRequest();
		xhr.open(
			"POST",
			"https://demo.smalla.cloud/articleLikes/add"
		);
		let obj = {
			articleId: id
		}
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.setRequestHeader("token", sessionStorage.getItem('token'));
		xhr.send(JSON.stringify(obj));
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4) {
				if (xhr.status >= 200 && xhr.status < 300) {
					num11 = 0;
					for (let i = 0; i < agreeMyNum.length; i++) {
						agreeMyNum[i].innerText = Number(agreeMyNum[i].innerText) + 1;
					}
					agreeMyNum2.innerText = Number(agreeMyNum2.innerText) + 1;
					for (let i = 0; i < agreeBox.length; i++) {
						agreeBox[i].style.filter = "brightness(0.7)"
					}
					agreeBox2.style.filter = "brightness(0.7)"
				}
			}
		};
	}
	function agreeMyNumDown() {
		let xhr = new XMLHttpRequest();
		xhr.open(
			"POST",
			"https://demo.smalla.cloud/articleLikes/" + id
		);
		xhr.setRequestHeader("Content-Type", "application/json");
		xhr.setRequestHeader("token", sessionStorage.getItem('token'));
		xhr.send("articleId = " + detail.getAttribute("code"));
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4) {
				if (xhr.status >= 200 && xhr.status < 300) {
					num11 = 1;
					for (let i = 0; i < agreeMyNum.length; i++) {
						agreeMyNum[i].innerText = Number(agreeMyNum[i].innerText) - 1;
					}
					agreeMyNum2.innerText = Number(agreeMyNum2.innerText) - 1;
					for (let i = 0; i < agreeBox.length; i++) {
						agreeBox[i].style.filter = "brightness(1.0)"
					}
					agreeBox2.style.filter = "brightness(1.0)"
				}
			}
		};
	}
	for (let i = 0; i < agreeBox.length; i++) {
		agreeBox[i].onclick = function () {
			num11 == 1 ? agreeMyNumUp() : agreeMyNumDown();
		}
		agreeBox2.onclick = function () {
			num11 == 1 ? agreeMyNumUp() : agreeMyNumDown();
		}
	}
	let downBox = detail.querySelector('.downBox');
	let num22 = 1;
	//文章下踩点击
	downBox.onclick = function () {
		num22 == 1 ? downBoxUp() : downBoxDown();
	}
	function downBoxUp() {
		downBox.style.filter = "brightness(0.6)";
		num22 = 2;
		alert("感谢您的反馈~")
	}
	function downBoxDown() {
		downBox.style.filter = "brightness(1.0)";
		num22 = 1;
	}
	//文章收藏
	let num55 = 1;
	let collectBox = detail.querySelector('.collectBox');
	let collectBox1 = node.querySelector('.collectBox');
	function collectAll() {
		collectBox.onclick = function collectAll1() {
			num55 == 1 ? collectUp() : collectDown();
			function collectUp() {
				let xhr = new XMLHttpRequest();
				xhr.open(
					"GET",
					"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/articleCollections/collect" + "/?userId = null" + detail.getAttribute("code")
				);
				xhr.setRequestHeader("Content-Type", "application/json");
				xhr.setRequestHeader("token", sessionStorage.getItem('token'));
				xhr.send("articleId = " + detail.getAttribute("code"));
				xhr.onreadystatechange = function () {
					if (xhr.readyState === 4) {
						if (xhr.status >= 200 && xhr.status < 300) {
							num55 = 0;
							collectBox.style.color = "#056de8";
							collectBox1.style.color = "#056de8";
						}
					}
				};
			}
			function collectDown() {
				let xhr = new XMLHttpRequest();
				xhr.open(
					"GET",
					"https://demo.smalla.cloud/articleCollections/cancel"
				);
				let obj = {
					userId: myId[0].innerText,
					articleId: id
				}
				xhr.setRequestHeader("Content-Type", "application/json");
				xhr.send(JSON.stringify(obj));
				xhr.onreadystatechange = function () {
					if (xhr.readyState === 4) {
						if (xhr.status >= 200 && xhr.status < 300) {
							num55 = 1;
							collectBox.style.color = "#8590a6";
							collectBox1.style.color = "#8590a6";
						}
					}
				};
			}
		}
		collectBox1.onclick = function collectAll1() {
			num55 == 1 ? collectUp() : collectDown();
			function collectUp() {
				let xhr = new XMLHttpRequest();
				xhr.open(
					"GET",
					"https://mockapi.eolink.com/D2Hrx8Qe1911deea5ab4b01704bbfe0b97948d26eb2d31d/articleCollections/collect" + "/?userId = null" + detail.getAttribute("code")
				);
				xhr.setRequestHeader("Content-Type", "application/json");
				xhr.setRequestHeader("token", sessionStorage.getItem('token'));
				xhr.send("articleId = " + detail.getAttribute("code"));
				xhr.onreadystatechange = function () {
					if (xhr.readyState === 4) {
						if (xhr.status >= 200 && xhr.status < 300) {
							num55 = 0;
							collectBox.style.color = "#056de8";
							collectBox1.style.color = "#056de8";
						}
					}
				};
			}
			function collectDown() {
				let xhr = new XMLHttpRequest();
				xhr.open(
					"GET",
					"https://demo.smalla.cloud/articleCollections/cancel"
				);
				let obj = {
					userId: myId[0].innerText,
					articleId: id
				}
				xhr.setRequestHeader("Content-Type", "application/json");
				xhr.send(JSON.stringify(obj));
				xhr.onreadystatechange = function () {
					if (xhr.readyState === 4) {
						if (xhr.status >= 200 && xhr.status < 300) {
							num55 = 1;
							collectBox.style.color = "#8590a6";
							collectBox1.style.color = "#8590a6";
						}
					}
				};
			}
		}

	}
	collectAll();
	body.appendChild(detail);
	// 上传数据页面清空
	content.value = "";
	title.value = "";
	photoUp.setAttribute("src", "");
	reader = "";
	imgUp = "";
	changeFile = 1;
	photoUp.style.zIndex = -1; //默认图标隐藏
}
// 刷新渲染文章
function myTitAll() {
	myTitNum = document.querySelectorAll(".btn1P2");
	// for (let i = 1; i < myTitNum.length; i++) {
	let xhr = new XMLHttpRequest();
	xhr.open(
		"GET",
		"https://demo.smalla.cloud/articles/my/1/100"
	);
	// xhr.setRequestHeader("Content-Type", "application/json");
	xhr.setRequestHeader("token", sessionStorage.getItem('token'));
	xhr.send();
	xhr.onreadystatechange = function () {
		if (xhr.readyState === 4) {
			if (xhr.status >= 200 && xhr.status < 300) {
				let total = JSON.parse(xhr.response).data.articlePage.total
				if (total > 0) {
					for (let i = 0; i < Number(total); i++) {
						let idPas = JSON.parse(xhr.response).data.articlePage.records[i].id;
						let titlePas = JSON.parse(xhr.response).data.articlePage.records[i].title;
						let contentPas = JSON.parse(xhr.response).data.articlePage.records[i].content;
						let picPas = JSON.parse(xhr.response).data.articlePage.records[i].pic;
						console.log(idPas)
						pasUp(titlePas, contentPas, picPas, idPas, picPas);
						newPas();
						comAll0();
					}
				}
			} else {
				alert('文章请求失败')
			}
		}
	}
};
// };
// console.log(myPas) 
// 文章点击显示 因为发布文章后还要为其添加点击事件 
function clickNew() {
	let down1P2 = document.querySelectorAll(".left2-1-box2-wri1");
	let upP2 = document.querySelectorAll(".left2-1-but5");
	let down2P2 = document.querySelectorAll(".left2-1-box2-wri2");
	imgMy = document.querySelectorAll(".left2-1-box2-img > img");
	for (let i = 0; i < down1P2.length; i++) {
		down1P2[i].onclick = function () {
			down1P2[i].style.display = "none";
			down2P2[i].style.display = "block";
			upP2[i].style.display = "block";
			if (changeFile == 0) {
				for (let i = 0; i < imgMy.length; i++) {
					imgMy[i].style.width = 100 + "%";
					imgMy[i].style.height = 100 + "%";
				}
			}
		};
	}
	for (let i = 0; i < upP2.length; i++) {
		upP2[i].onclick = function () {
			down1P2[i].style.display = "flex";
			down2P2[i].style.display = "none";
			upP2[i].style.display = "none";
			if (changeFile == 0) {
				for (let i = 0; i < imgMy.length; i++) {
					imgMy[i].style.width = 190 + "px";
					imgMy[i].style.height = 105 + "px";
				}
			}
		};
	}
}
clickNew();
// 上传头像
let avatarBox = document.querySelector(".header5-2");
let file2 = document.querySelector("#file2");
let avatar = document.querySelectorAll(".avatar");
let changeFile2; //默认小图标
let imgUp2; //copy照片src
let reader2;
let urlNew;
file2.onmouseover = function () {
	photoUp2.style.filter = "brightness(0.8)";
	upAvatar.style.opacity = 1;
};
file2.onmouseout = function () {
	photoUp2.style.filter = "brightness(1)";
	upAvatar.style.opacity = 0;
};
// 上传照片--头像

file2.onchange = function uploadAvatar2() {
	avatar = document.querySelectorAll(".avatar");
	// changeFile2 = 0; //在发布时验证是否上传封面
	let fileData = this.files[0]; //获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件
	if (!/image\/\w+/.test(fileData.type)) {
		alert("看清楚，这个需要图片！");
		return false;
	}
	reader2 = new FileReader(); //读取文件内容
	/*当读取操作成功完成时调用*/
	let dataa = URL.createObjectURL(fileData);
	console.log(dataa)
	// console.log(dataa1)
	reader2.readAsDataURL(fileData);
	reader2.onload = function () {
		let xhr0 = new XMLHttpRequest();
		alert('头像上传中~')
		let formData = new FormData();
		formData.append("file", fileData)
		xhr0.open(
			"POST",
			"https://pic.smalla.cloud/api/v1/upload"
		);
		// xhr.setRequestHeader("Content-Type", "multipart/form-data");
		xhr0.setRequestHeader("token", sessionStorage.getItem('token'));
		xhr0.onreadystatechange = function () {
			if (xhr0.readyState === 4) {
				if (xhr0.status >= 200 && xhr0.status < 300) {
					if (JSON.parse(xhr0.response).message != "上传成功") {
						alert(JSON.parse(xhr0.response).message);
						xhr0.abort();
						return;
					} else {
						photoUp2.setAttribute("src", reader2.result);
						urlNew = JSON.parse(xhr0.response).data.links.url
						for (let i = 0; i < avatar.length; i++) {
							avatar[i].setAttribute("src", reader2.result);
						}
						let xhr = new XMLHttpRequest();
						let obj = {
							'id': myId[0].innerText,
							'username': userName[0].innerText,
							'description': description[0].innerText,
							'phone': phone[0].innerText,
							'avatar': urlNew
						}
						xhr.open(
							"POST",
							"https://demo.smalla.cloud/user/modify"
						);
						xhr.setRequestHeader("Content-Type", "application/json");
						xhr.setRequestHeader("token", sessionStorage.getItem('token'));
						xhr.onreadystatechange = function () {
							if (xhr.readyState === 4) {
								if (xhr.status >= 200 && xhr.status < 300) {
									photoUp2.setAttribute("src", reader2.result);
									alert("头像泰库啦~")
								} else { alert(JSON.parse(xhr.response).message) }
							}
						};
						xhr.send(JSON.stringify(obj));


					}
				} else { alert("上传失败~") }
			}
		}
		// console.log(data.get('file'))
		xhr0.send(formData);
	};
};
upload.onclick = function () {
	myPartMes1.style.display = "none";
	myPartMes2.style.display = "none";
	myPartMes3.style.display = "block";
	upAvatar.style.display = "flex";
	upAvatar.style.opacity = 1;
};
btnMyMes.onclick = function () {
	alert("稍等，数据上传中~")
	let upId = document.querySelector(".upId");
	let upName = document.querySelector(".upName");
	let upDescription = document.querySelector(".upDescription");
	let upPhone = document.querySelector(".upPhone");
	//手机号信息验证（11位数）
	var CellPoe = /^[1][3,4,5,7,8][0-9]{9}$/;
	if (!CellPoe.test(upPhone.value)) {
		alert("手机号信息有误,请输入正确的手机号喔~");
	} else {
		let olds = avatar[0].getAttribute("src");
		let xhr = new XMLHttpRequest();
		let obj = {
			id: upId.value,
			username: upName.value,
			description: upDescription.value,
			phone: upPhone.value,
			avatar: urlNew
		}
		xhr.open(
			"POST",
			"https://demo.smalla.cloud/user/modify"
		);
		xhr.setRequestHeader("Content-Type", "application/json");
		xhr.setRequestHeader("token", sessionStorage.getItem('token'));
		xhr.send(JSON.stringify(obj));
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4) {
				if (xhr.status >= 200 && xhr.status < 300) {
					userName = document.querySelectorAll(".userName");
					for (let i = 0; i < myId.length; i++) {
						myId[i].innerText = upId.value;
					}
					for (let i = 0; i < userName.length; i++) {
						userName[i].innerText = upName.value;
					}
					for (let i = 0; i < description.length; i++) {
						description[i].innerText = upDescription.value;
					}
					for (let i = 0; i < phone.length; i++) {
						phone[i].innerText = upPhone.value;
					}
					alert("修改成功~");
					upId.innerText = "";
					upName.innerText = "";
					upDescription.innerText = "";
					upPhone.innerText = "";
					myPartMes1.style.display = "block";
					myPartMes2.style.display = "block";
					myPartMes3.style.display = "none";
					upAvatar.style.display = "none";
				}
			}
		};
	}
};
// 个人中心页封面上传
let file3 = document.querySelector("#file3");
let reader3;
let urlNew2;
let photoUp3 = document.querySelector(".photoUp3");
file3.onchange = function uploadAvatar3() {
	let old = photoUp3.getAttribute("src");
	// changeFile2 = 0; //在发布时验证是否上传封面
	let fileData = file3.files[0]; //获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件
	reader3 = new FileReader(); //读取文件内容
	reader3.readAsDataURL(fileData); //异步读取文件内容，结果用data:url的字符串形式表示
	/*当读取操作成功完成时调用*/
	reader3.onload = function () {
		// console.log(e); //查看对象
		// console.log(this.result);//要的数据 这里的this指向FileReader（）对象的实例reader
		let xhr = new XMLHttpRequest();
		alert('上传过程中可点击封面右下角取消上传')
		let stop = document.querySelector('.stop');
		stop.style.opacity = 1;
		stop.onclick = function () {
			xhr.abort();
			alert('取消上传');
			stop.style.opacity = 0;
			return;
		}
		let formData = new FormData();
		formData.append("file", fileData)
		xhr.open(
			"POST",
			"https://pic.smalla.cloud/api/v1/upload"
		);
		// xhr.setRequestHeader("Content-Type", "multipart/form-data");
		xhr.setRequestHeader("token", sessionStorage.getItem('token'));
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4) {
				if (JSON.parse(xhr.response).message != "上传成功") {
					photoUp3.setAttribute("src", old);
					alert(JSON.parse(xhr.response).message);
					xhr.abort();
					stop.style.opacity = 0;
					return;
				}
				if (xhr.status >= 200 && xhr.status < 300) {
					urlNew2 = JSON.parse(xhr.response).data.links.url
					localStorage.setItem("urlNew2", urlNew2)
					photoUp3.setAttribute("src", reader3.result);
					alert(JSON.parse(xhr.response).message)
					stop.style.opacity = 0;
				} else { alert("上传失败~") }
			}
		}
		// console.log(data.get('file'))
		xhr.send(formData);
	};
};

// 退出登录  页面设置不缓存 刷新跳转回登录页面 重新载入文档
let signOut = document.querySelector("#signOut");
signOut.onclick = function () {
	sessionStorage.setItem('token', "");
	sessionStorage.setItem('username', "");
	location.reload();
}
//点击图片放大预览
function bigBtn() {
	let arrPic = document.querySelectorAll(".preview");
	for (let i = 0; i < arrPic.length; i++) {
		arrPic[i].addEventListener("click", () => {
			body.style.overflow = "hidden";
			//创建预览器
			let container = document.createElement("div");
			container.classList.add("preview-container");
			container.onclick = function () {
				body.style.overflow = "scroll"
				container.remove();
			}
			//创建预览图片
			let innerImg = document.createElement("img");
			innerImg.src = arrPic[i].src;
			innerImg.classList.add("pic");
			//绑定滚动事件
			container.onwheel = function (event) {
				const width = getComputedStyle(innerImg).width.slice(0, -2);
				const height = getComputedStyle(innerImg).height.slice(0, -2);
				if (event.deltaY > 0) {
					//向上滚动放大
					innerImg.style.width = parseInt(width) * 1.1 + "px";
					innerImg.style.height = parseInt(height) * 1.1 + "px";
				} else if (event.deltaY < 0) {
					//向下滚动缩小
					innerImg.style.width = parseInt(width) * 0.9 + "px";
					innerImg.style.height = parseInt(height) * 0.9 + "px";
				}
			}
			//将图片添加到预览器
			container.append(innerImg);
			//将预览器添加到 body 中
			document.body.append(container);
		})
	}
}
bigBtn();

